<template>
  <div>

    <div style="display: flex">
      <el-card style="width: 600px;margin-left: 30px;">
        <el-form label-width="80px" size="small">
          <div style="text-align: center">
            <el-upload
                class="avatar-uploader"
                action="http://localhost:8090/user/avatar"
                :show-file-list="false"
                :headers="heders"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="user.avatar" :src="user.avatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <el-form-item label="用户名" style="margin-top: 10px">
            <el-input v-model="user.username" disabled autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="user.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="user.nickname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-input v-model="user.role" disabled autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="user.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="user.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="user.address" autocomplete="off"></el-input>
          </el-form-item>
          <div style="text-align: center">
            <el-button type="primary" @click="save">确 定</el-button>
          </div>
        </el-form>
      </el-card>
      <div>
        <div style="display: flex">
          <el-card style="width: 300px;height: 100px;margin-left: 100px;">
            当前积分: {{ score }}<br><br>
            用户权限: {{ isVIP }}
          </el-card>
          <div>
            <el-button style="height: 40px;width:80px;margin-left: 20px;margin-top: 5px" type="primary"
                       @click="BuyIntegral">
              积分购买
            </el-button>
            <br>
            <el-button style="height: 40px;width:80px;margin-left: 20px;margin-top: 10px" type="primary"
                       @click="BuyVIP">
              vip购买
            </el-button>
          </div>

        </div>

        <el-card style="width: 500px;height: 500px;margin-left: 50px;margin-top: 20px">
          <h1 style="text-align: center">
            日志
          </h1>
        </el-card>
      </div>
    </div>

    <!--充值模态窗口-->
    <el-dialog :title='otherData.windowName' :visible.sync="dialogFormVisible" width="400px">
      <el-form label-width="80px" style="margin-top: -10px">
        <el-form-item label="充值金额 :">
          <el-input autocomplete="off" style="width: 200px;" v-model="money"></el-input>
          <el-button type="primary" @click="QRCode" style="margin-left: 10px">确 定</el-button>
        </el-form-item>
      </el-form>
      <div style="font-size: 10px;text-align: center;margin-top: 10px" v-if="!vip">普通用户，1元可兑换10积分</div>
      <div style="font-size: 10px;text-align: center;margin-top: 10px" v-if="vip">vip用户，1元可兑换12积分</div>
    </el-dialog>
    <!--  二维码模态窗口  -->
    <el-dialog :title='otherData.windowName' :visible.sync="zxingVisible" width="350px">
      <img id="zxing" :src="imageUrl"/>
    </el-dialog>

    <el-dialog :title='otherData.windowName' :visible.sync="VIPVisible" width="350px">
      <div style="font-size: 10px;text-align: center;margin-top: 10px">
        <img id="VIPzxing" :src="imageUrl"/><br>
        <el-popover
            placement="bottom"
            title="VIP特权"
            width="250"
            trigger="hover"
            content="1.充值成功后，即可获取100积分2.vip用户购买积分，可获得8折优惠">
          <a slot="reference">vip用户特权</a>
        </el-popover>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  data() {
    return {
      // 判断是否有user，如果有，则取出user，并转为json格式，没有则为null
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      imageUrl: "",
      heders: {
        token: JSON.parse(localStorage.getItem("user")).token
      },

      vip: 0,
      score: 0,

      isVIP: "普通用户",

      //充值模态窗口
      dialogFormVisible: false,
      //二维码模态窗口
      zxingVisible: false,
      //vip模态窗口
      VIPVisible: false,
      otherData: {
        windowName: ''
      },

      //充值金额
      money: null,

    }
  },
  mounted() {
    this.request.get("/userExtend/" + this.user.id).then(
        res => {
          this.score = res.data.integral
          this.vip = res.data.isVip
        },
        Error => {
          console.log(Error)
        })
  },
  watch: {
    imageUrl() {
      this.user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    },
    vip(){
      if(this.vip!==0){
        this.isVIP = "vip用户"
      }else{
        this.isVIP = "普通用户"
      }
    }
  },
  methods: {
    save() {
      this.request.post('/user', this.user).then(
          res => {
            if (res.code == 200) {
              this.$message.success("修改成功")
            } else {
              this.$message.error(res.msg)
            }
          },
          Error => {
            console.log(Error)
          })
      this.dialogFormVisible = false
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 照片格式验证
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    BuyIntegral() {
      this.dialogFormVisible = true;
      this.otherData.windowName = '积分购买'
    },
    BuyVIP() {
      if (this.vip !== 0) {
        this.$message.warning('您已经是vip用户')
        return;
      }
      this.VIPVisible = true;
      this.otherData.windowName = 'vip购买'
      this.request.get("/userExtend/vip/" + this.user.id, {responseType: 'blob'}).then(
          res => {
            document.getElementById("VIPzxing").src = URL.createObjectURL(res);
          },
          Error => {
            console.log(Error)
          })
    },
    QRCode() {
      if (!this.money) {
        this.$message.error('请输入充值金额')
        return;
      }
      this.dialogFormVisible = false;
      this.zxingVisible = true;
      this.otherData.windowName = '请扫码充值'
      this.request.get("/userExtend/" + this.user.id + "/" + this.money, {responseType: 'blob'}).then(
          res => {
            document.getElementById("zxing").src = URL.createObjectURL(res);
          },
          Error => {
            console.log(Error)
          })
      this.money = null;
    }
  }
}


</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>